<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        #messages { list-style: none; margin: 0; padding: 0; height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; }
        #message { width: 70%; padding: 5px; }
        button { padding: 5px 10px; }
    </style>
</head>
<body>
<h2>WebSocket Chat</h2>
<ul id="messages"></ul>
<input type="text" id="message" placeholder="Type a message..." />
<button onclick="sendMessage()">Send</button>

<script>
    const ws = new WebSocket("ws://localhost:8082/microblog/ws");

    ws.onopen = () => {
        console.log("Connected to server");
    };

    ws.onmessage = (event) => {
        const messages = document.getElementById("messages");
        const li = document.createElement("li");
        li.textContent = event.data;
        messages.appendChild(li);
        messages.scrollTop = messages.scrollHeight;
    };

    function sendMessage() {
        const input = document.getElementById("message");
        const text = input.value.trim();
        if (text && ws.readyState === WebSocket.OPEN) {
            ws.send(text);
            input.value = "";
        }
    }
</script>
</body>
</html>